_T.Ui.Tab = function (cfg) {

    this.el = null;

    this.title = null;

    this.titleDom = null;

    _T.apply(this, cfg);
};
//closeable css style
_T.Ui.TabPanel = function (cfg) {

    this.id = null;

    this.el = null;

    this.width = null;

    this.height = null;

    this.activeTab = 1;

    this.tabs = [];

    _T.apply(this, cfg);

    var size = _T.winSize();

    if (this.width.indexOf("%") != -1) {
        this.width = size.width * parseInt(this.width.replace("%", "")) / 100.00;
    }

    if (this.height.indexOf("%") != -1) {
        this.height = size.height * parseInt(this.height.replace("%", "")) / 100.00;
    }

    this.width = parseInt(this.width);

    this.height = parseInt(this.height);

    this.activeTab = parseInt(this.activeTab == null ? "1" : this.activeTab) - 1;

    this.init = function () {

        if (!this.el) {
            return;
        }

        var tabs = this.el.childNodes;
        for (var i = 0; i < tabs.length; i++) {
            if (tabs[i].tagName.toLowerCase() == "tab") {
                var tab = new _T.Ui.Tab(_T.apply(tabs[i], {el:tabs[i], id:tabs[i]["tabId"]}));
                this.tabs.push(tab);
            }
        }

        var style = {style:"width:" + this.width + "px;height:" + this.height + "px;"};

        var div = createElement("div", {style:style});

        var top = createElement("div", {style:style});

        var ul = createElement("ul", {"class":"tabbar"});

        top.appendChild(ul);

        var content = createElement("div", {"class":"tag", style:style});

        div.appendChild(top);

        div.appendChild(content);

        this.el.parentNode.insertBefore(div, this.el);

        content.appendChild(this.el.parentNode.removeChild(this.el));

        for (var i = 0; i < this.tabs.length; i++) {
            var b = (i == this.activeTab);
            var tab = this.tabs[i];
            var li = createElement("li", {"class":(b) ? "selected" : ""});
            ul.appendChild(li);
            var a = createElement("a", {"href":"javascript:HUI.tabPanels[\"" + this.id + "\"].active(" + i + ")"});
            a.appendChild(document.createTextNode(tab.title));
            li.appendChild(a)
            tab.el.style.display = (b) ? "block" : "none";
            tab.titleDom = li;
        }
    };

    this.init();

    this.active = function (index) {
        this.activeTab = index;
        for (var i = 0; i < this.tabs.length; i++) {
            var b = (i == this.activeTab);
            this.tabs[i].titleDom.className = b ? "selected" : "";
            this.tabs[i].el.style.display = b ? "block" : "none";
        }
    };
};